<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame 
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>Character Cycle</title>
  <meta name="description" content="jQuery pluging for character cycling effect" />
  <meta name="author" content="Robin Willis" />
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.charCycle.js"></script>
  <link rel="stylesheet" href="css/charCycle.css" type="text/css">  

  <script type="text/javascript">
  $(document).ready(function(){
  	
  	console.log("here we go");
  	
  	$('.c').mouseenter(function(){
  		
  		if($(this).hasClass('cycling')==false){
			  		
			  		$(this).charcycle({'target':'#text'});	
		}
  	});
  });
  	
  </script>
  
</head>

<body>
  <div>
    <header>
      <h1>Character Cycle Demo</h1>
    </header>
    
    <div>
    	<h3>Using Divs</h3>
    	<div class="c"><a href="#" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></div> 
    	<div class="c"><a href="#" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></div>  
    	<h3>Using a List</h3>
    <ul>
    	<li class="c"><a href="#" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>
    	<li class="c"><a href="#" id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a></li>	
    </ul>
    
    
    </div>

    <footer>
     <p>by Robin Willis</p>
    </footer>
  </div>
</body>
</html>
